<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>兄弟组件传值：两个组件属于同一个父组件，兄弟组件之间传值</p>
        <hr>
        <son1></son1>
        <son2></son2>
    </div>
    <template id="son1">
        <div>
            <h1>son1</h1>
            <button @click="post">传给son2</button>
        </div>
    </template>
    <template id="son2">
        <div>
            <h1>son2</h1>
            <p>兄弟组件传来的数据：{{info}}</p>
        </div>
    </template>
    <script src="../0511/js/vue.js"></script>
    <script>
        // 先声明一个空实例，叫做事件总线；由它来完成自定义事件的发射和监听
        let eventBus = new Vue();
        Vue.prototype.$bus = eventBus;
        let vm = new Vue({
            el: '#app',
            data: {
               
            },
            methods: {
                
            },
            components: {
                son1: {
                    template: '#son1',
                    data() {
                        return {
                            msg: '上号，开打开打'
                        }
                    },
                    methods: {
                        post() {
                            // console.log(this.msg);
                            this.$bus.$emit('sent', this.msg)
                        }
                    }
                },
                son2: {
                    template: '#son2',
                    data() {
                        return {
                            info: ''
                        }
                    },
                    created() {
                        this.$bus.$on('sent', val => {
                            // console.log(val);
                            this.info = val;
                        })
                    }
                }
            }
        })
    </script>
</body>

</html>